Gossip Blogger Template | Documentation [Free Version]

Getting Started

Template Info

Thank You For Downloading My Template. Please Read The Documentation Carefully, If You Still Have Any Problem Please Feel Free To Email Via My Contact Page.

Note : Premium And Lifetime Support Only Provided To Full Version Buyers

It Is Restricted To Remove Our Credit Link Due To The Erasure Of The Credit Links Will Make Your Site To Redirect Themeswear.com For Those Who Want To Remove Can Purchase The Template.

What You Get?

  • Removed Footer Credits
  • No Encrypted Codes
  • Unlimited Support
  • Full Access
  • Lifetime Template Updates
  • For Unlimited Domains
  • And Much More...

Purchase Now!!!

Features

  • Responsive
  • SEO Friendly
  • Featured Slider
  • Clean Look
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Off Canvas Responsive Menu
  • Breadcrumbs
  • Related Posts with Thumb (Slider)
  • Search Box
  • Information Message Box
  • Nice Looking Code Box & Blockquotes
  • Clean Looking Buttons
  • Social Share Button
  • Numbered Page Navigation
  • Custom 404 Page
  • Smooth Scroll back To Top
  • Custom Recent Comment Widget
  • Multi Author Box
  • Clean Comment Style
  • And more..

Installation

You Can Install The Template In Two Ways:

  1. Uploading: Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  2. Direct Uploading: By Copy And Paste.Just Copy Your Blogger Template By Opening It In Notepad Select The Whole Code And Paste It Into Template Editor.

1. Uploading Method

Customize Template

Logo Setting:

Go to your Blogger Account - Your Blog & select Layout

Now In Header Widget Click On Edit

Upload Your Logo And Select "Instead of title and description" as the "Placement" option & Select Shrink To Fit.

Navigation:
  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- Begin Main Nav -->
  2. Then replace the # with your urls.
	  <!-- Begin Main Nav -->
            <div class='nav-wrapper'>
                <div class='nav-menu'>
		  <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
                        <li class='active'><a href='#fakelink'>Home</a>
                            <ul>
                              <li class='active' itemprop='name'><a href='/' itemprop='url'>Example Variation 01</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 02</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 03</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 04</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 05</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 06</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 07</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 08</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 09</a></li>
                                <li itemprop='name'><a href='' itemprop='url'>Example Variation 10</a></li>
                            </ul>
                        </li>
                        <li><a href='#'>Headers</a>
							<!-- Sub Menu -->
                            <ul>
                                <li><a href='#'>Header Default</a>
									<!-- Sub Menu-Child -->
                                    <ul>
                                        <li itemprop='name'><a href='' itemprop='url'>Static Header</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Fixed Header 01</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Fixed Header 02</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Using Logo Text Description</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Using Logo Text</a></li>
                                    </ul>
                                </li>
                                <li><a href='#'>Header Large</a>
                                    <ul>
                                        <li itemprop='name'><a href='' itemprop='url'>Static Header</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Fixed Header 01</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Fixed Header 02</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Using Logo Text Description</a></li>
                                        <li itemprop='name'><a href='' itemprop='url'>Using Logo Text</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li itemprop='name'><a href='#' itemprop='url'>Single Post</a></li>
                        <li itemprop='name'><a href='#' itemprop='url'>Post Formats</a></li>
                        <li itemprop='name'><a href='#' itemprop='url'>Archives</a></li>
                      	<li itemprop='name'><a href='/404' itemprop='url'>404</a></li>
                        <li itemprop='name'><a href='#' itemprop='url'>Buy Now</a></li>
                    </ul>

                </div><!-- /.nav-menu -->
            </div><!-- /.nav-wrapper -->
            <!-- End Main Nav -->
Social Links:
  1. Go to Blogger Dashboard -> Layout -> Social Header [Social Buttons] -> Click On Edit Button
Icons Available [ facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen , vimeo]

Note: The Social Site Name Sholud Be In Lower-Case.

Slider (Setup Guide)

Slider Works Automatically With New Post.
But Few Things Are Needed To Work The Slider Perfectly:

  1. Your Blog Must Be Public From The Settings
  2. Your Blog Feed Set To Be Full From settings -> Other -> Site feed -> Allow Blog Feed (Full).
  3. Your Blog Post Has at least One Label In Your Latest Posts.
  4. Please Try To Add High Quality Images.
  5. If There Is No Image, The Default Image Will Appear Please Change It If You Want To.
    To Change The Default Image Search In Blogger Template Editor " // set your own image " And Replace The Default Image URL With Your Own URL.
    Default Image "https://4.bp.blogspot.com/-kN_gyWD9QVs/Vz8vQLq3_1I/AAAAAAAAAIg/CGGQe9ryJjsZVUDnP0TGsytE8ybb_LzywCLcB/s1600/ipad-default-wallpaper.jpg"
Instagram Widget:

Change Instagram Username.

  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- Instagram Widget -->
  2. Now Change "@your_username" , "#Your_insta_profile_link" , "//User ID (15920822)" , "//Access Token"
How To Generate Instagram Access Token?

To Generate Instagram Access Token For Instagram Widget Than Go To This URL- http://instagram.pixelunion.net/ And Click Generate Access Token

Then You'll Get An Access Token Look Like This- 2332485555.1654d0c.55a6e4f951de429f89d5edc21b3c689b

Now Search In Blogger Template Editor This " <!-- Insta Feed --> " And Follow The Steps Given In The Below Image.

Footer Menu:
  1. Go to Blogger Dashboard -> Layout -> Main Menu -> Click On Edit Button
  2. And Just Add Your Links.

Widgets

Recent Comment Widget:
  • Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- // Recent Comment Number
  • Default Recent Comment Number Is 5. Change It If You Want.
Post Author
Edit Post Author Bio
  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- Post Author Bio -->
  2. Now Change It With Your Own Bio
Edit Author Social Links
  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- Your Social Links -->
  2. Now Change It With Your Own Links
Related Posts Widget:
  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- // Number Of Posts

Shortscode

Buttons:
  1. In the Post section, click on edit post or create a new post
  2. Click on HTML
  3. A code is written below use that code to display that Button link
<!-- Default Button (Yellow) -->
<a class="btn btn-main btn-dashed" href="#your_link" target="_blank">Text</a>


<!-- Green Button -->
<a class="btn btn-main btn-dashed green" href="#your_link" target="_blank">Text</a>


<!-- Red Button -->
<a class="btn btn-main btn-dashed red" href="#your_link" target="_blank">Text</a>


<!-- Blue Button -->
<a class="btn btn-main btn-dashed blue" href="#your_link" target="_blank">Text</a>
Alert Box OR Info Box:
  1. In the Post section, click on edit post or create a new post
  2. Click on HTML
  3. A code is written below use that code to display the alert boxes
<!-- Default Box (Grey) -->	  
<div class="pnote">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>


<!-- Success Box (Green) -->	
<div class="pnote pnote-success">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>


<!-- Info Box (Blue) -->	
<div class="pnote pnote-info">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>


<!-- Warning Box (Yellow) -->
<div class="pnote pnote-warning">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>


<!-- Danger Box (Red) -->
<div class="pnote pnote-danger">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>


<!-- Simple Box (White) -->
<div class="pnote pnote-default">
<h5>
note Heading</h5>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

Settings

Mobile Version

To Use Responsive Design In Mobile Devices Than First You Need To Enable It.

Note:The Responsive Menu Link Sub Menu Will Not Work(Open) In The Desktop If You Resize Your Window It Is Only Work On Mobile Devices.

  1. Go to Blogger.com -> Your Blog -> Template -> Now In Mobile Section Click On Gear Button As Shown In Given Below Image

2. Click On "No. Show desktop template on mobile devices." And Than Click On Save.

Change The Post Date Format:

Go to Blogger Dashboard -> Settings -> Language and Formatting -> Formatting -> Timestamp Format -> Set It To Date Instead Of Time.
Now Click On Save...

Having Problem OR Feeling Lazy To Set Up The Template? Buy Theme + Installation Service